<template>
  <view class="container">
    <view class="section-title">按科室</view>
    <view class="more-departments" @click="showMoreDepartments">更多科室</view>
    <scroll-view class="department-scroll-view" scroll-y="true">
      <view class="department-grid">
        <view class="department-column" v-for="(column, index) in splitColumns" :key="index">
          <view class="department-item" v-for="(department, subIndex) in column" :key="subIndex">
            <view class="department-icon">
              <text>{{ department.icon }}</text>
            </view>
            <text class="department-name" @click="navigateToDepartment(department)">{{ department.departmentsName }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="section-title"></view>
    <scroll-view class="department-scroll-view-x" scroll-x="true" @scroll="handleScroll">
      <view class="department-grid">
		  <!-- 全部医生按钮 -->
		          <view class="department-item" @click="navigateToAllDoctors">
		            <text class="department-name">全部</text>
		          </view>
        <view class="department-item" v-for="(department, index) in departments" :key="index">
          <text class="department-name" @click="navigateToDepartment(department)">{{ department.departmentsName }}</text>
        </view>
      </view>
    </scroll-view>
    <view class="container">
      <view class="doctor-list-wrapper">
        <view class="doctor-info" v-for="(doctor, index) in dataList" :key="index">
          <view class="doctor-left">
            <image class="doctor-avatar" :src="doctor.profilePic" mode="aspectFill" @click="xq(doctor)"></image>
          </view>
          <view class="doctor-right">
            <view class="doctor-detail">
              <text class="doctor-name">{{ doctor.name }}</text>
              <view class="doctor-meta">
                <text class="doctor-title" style="color: red;">{{ doctor.hospitalName }}</text>
                <text class="doctor-specialty">{{ doctor.departmentsName }}</text>
              </view>
              <view class="doctor-hospital-info">
                <text class="doctor-hospital">{{ doctor.hospital }}</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 0">三甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 1">二甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 2">一甲医院</text>
              </view>
            </view>
          </view>
          <view class="doctor-left">
            擅长: <text class="doctor-bio">{{ doctor.bio }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getDoctor } from "@/api/doctor/doctor";
import { getDepartmentNameList } from '@/api/departments/departments.js';
import { getDepartmentName } from '@/api/departments/departments.js';

import { batchSelectDoctor } from "@/api/doctor/doctor";

export default {
  data() {
    return {
      dataList: [],
      queryParam: {
        pageNum: 1,
        pageSize: 400,
        name: null,
        sex: null,
        birthDate: null,
        phone: null,
        address: null,
        licenseNumber: null,
        licenseissueDate: null,
        licenseExpireDate: null,
        hospitalId: null,
        departmentId: null,
        bio: null,
        profilePic: null,
        status: null,
        id: null
      },
      departments: []
    };
  },
  async onLoad() {
    // this.getDoctors();
    this.getDepartmentNameList();
  },
  computed: {
    splitColumns() {
      const columnSize = Math.ceil(this.departments.length / 2);
      const column1 = this.departments.slice(0, columnSize);
      const column2 = this.departments.slice(columnSize);
      return [column1, column2];
    }
  },
  methods: {
	  //跳转医生详情页面
	  xq(item) {
	    let id = item.id;
	    uni.navigateTo({
	      url: `/pages/doctor/doctor?id=${id}`
	    })
	  },
	  // 例如：this.$router.push({ name: 'DepartmentPage', params: { departmentId: department.id } });
    navigateToDepartment(department) {
	 batchSelectDoctor(department.departmentsId).then(response => {
	   this.dataList = response.data
	 });
    },
    // 查询主科室
    getDepartmentNameList() {
      getDepartmentName().then(res => {
        this.departments = res.data;
      });
    },
    navigateToAllDoctors() {
      this.loading = true;
	  
      getDoctor(this.queryParam).then(response => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
	
    handleScroll(e) {
      // 可以在这里处理滚动事件，例如显示滚动条位置等
      console.log('Scroll event:', e.detail);
    },
    showMoreDepartments() {
      uni.navigateTo({
        url: '/pages/departments/index'
      });
    }
  }
};
</script>


<style scoped>
/* 容器样式 */
.container {
  padding: 10px;
}

/* 医生列表容器样式 */
.doctor-list-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  padding: 3px;
  border-radius: 8px;
}

/* 医生信息块样式 */
.doctor-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 头像左侧容器样式 */
.doctor-left {
  flex: 0 0 100px; /* 固定宽度为100px */
  margin-right: 15px;
}

/* 头像样式 */
.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 文字信息右侧容器样式 */
.doctor-right {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

/* 医生详细信息样式 */
.doctor-detail {
  width: 100%;
}

/* 医生姓名样式 */
.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 医生元信息样式（医院名称和科室） */
.doctor-meta {
  margin-bottom: 15px;
}

.doctor-title {
  font-size: 16px;
  color: red;
  margin-bottom: 5px;
}

.doctor-specialty {
  font-size: 14px;
  color: #555555;
}

/* 医生医院信息样式 */
.doctor-hospital-info {
  width: 100%;
}

.doctor-hospital {
  font-size: 16px;
  margin-bottom: 5px;
}

.hospital-level {
  font-size: 14px;
  color: #333333;
  margin-top: 2px;
}


.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}


.department-scroll-view {
  overflow-y: auto;
  max-height: 300px; /* 可根据实际情况调整最大高度 */
  scrollbar-width: thin; /* 定义滚动条宽度 */
  scrollbar-color: #ccc #f8f8f8; /* 定义滚动条颜色和轨道颜色 */
  transition: scroll 0.3s ease; /* 滚动时添加过渡效果 */
}


.department-scroll-view::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}


.department-scroll-view::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滚动条滑块圆角 */
}


.department-scroll-view::-webkit-scrollbar-track {
  background-color: #f8f8f8; /* 滚动条轨道颜色 */
}


.department-grid {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}


.department-column {
  display: flex;
  flex-direction: column;
  flex: 1;
}


.department-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}


.department-icon {
  font-size: 24px;
  margin-bottom: 5px;
}


.department-name {
  font-size: 16px;
  font-weight: bold;
}


.more-departments {
  margin-top: 10px;
  text-align: center;
  color: #007BFF;
  cursor: pointer;
}


.department-scroll-view-x {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin; /* 定义滚动条宽度 */
  scrollbar-color: #ccc #f8f8f8; /* 定义滚动条颜色和轨道颜色 */
  transition: scroll 0.3s ease; /* 滚动时添加过渡效果 */
}


.department-scroll-view-x::-webkit-scrollbar {
  height: 8px; /* 水平滚动条高度 */
}


.department-scroll-view-x::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 滚动条滑块颜色 */
  border-radius: 4px; /* 滚动条滑块圆角 */
}


.department-scroll-view-x::-webkit-scrollbar-track {
  background-color: #f8f8f8; /* 滚动条轨道颜色 */
}


.department-grid-x {
  display: inline-block;
}


.department-item {
  display: inline-block;
  margin-right: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
}


.department-name {
  font-size: 16px;
  font-weight: bold;
}
</style>